<template>
  <a-popover trigger="click" @popup-visible-change="popupChange">
    <slot>
      <a-button type="text" size="mini">查询材质报价</a-button>
    </slot>
    <template #content>
      <div style="width: 460px">
        <a-table class="table-singe-line show-border-table" ref="tableRef" :scroll="{ y: '360px' }" row-key="id" :loading="tableLoading" :data="tableList" size="mini" :pagination="false">
          <template #columns>
            <a-table-column data-index="sort" title="材质" :width="160">
              <template #cell="{ record }">
                <p style="font-weight: bold">{{ record.productName }}</p>
                <p class="sku">{{ record.sku }}</p>
              </template>
            </a-table-column>
            <a-table-column data-index="unit" title="计量单位" :width="80" />
            <a-table-column data-index="quotePrice" title="今日最新报价" :width="100">
              <template #cell="{ record }">
                <p>￥{{ record.quotePrice }}</p>
              </template>
            </a-table-column>
            <a-table-column data-index="beforeQuotePrice" title="昨日报价" :width="100">
              <template #cell="{ record }">
                <p>￥{{ record.beforeQuotePrice }}</p>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
    </template>
  </a-popover>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { findMaterialQuotePage } from '@/api/system'
  const tableLoading = ref(false)
  const tableList = ref<Array<any>>([])

  function popupChange(status: boolean) {
    if (status) {
      getTableList()
    }
  }
  // 获取列表
  async function getTableList() {
    let params = {
      pageNum: 1,
      pageSize: 500,
      display: true,
    }
    tableLoading.value = true
    const res: any = await findMaterialQuotePage(params)
    tableLoading.value = false
    tableList.value = res?.data?.records || []
  }
</script>

<style lang="less" scoped></style>
